<template>
    <div >
        <div class="dialog active"    >
            <div class="dialog_content">
                <slot></slot>
                <div class="dialog_close" v-show=" close "  @click=" closeDialog " ></div>
            </div>
        </div>
        <div class="mask" @click=" closeDialog " ></div>

    </div>
</template>

<script>
export default {
    name:'common-dialog',
    props: {
        close: {
            type: Boolean,
            default: false
        }
    },
    methods: {
        closeDialog(){
            this.$store.dispatch('setShowDialog',  false)
        }
    }
}
</script>
<style lang="scss" scoped>

.dialog.active {
  width: 85%;
  opacity: 1;
  /* transform: translate(-50%, -100%); */
}

.dialog_content {
  /* max-height: 300px; */
  /* overflow-y: scroll; */
}
.dialog {
  width: 20%;

  max-width: 500px;
  position: fixed;
  transform: translate(-50%, -50%);
  //background: #fff;
  z-index: 100;
  left: 50%;
  top: 50%;
  opacity: 0;
  border-radius: 4px;
  transition: all 0.5s cubic-bezier(0.8, -0.5, 0.2, 1.4);
  padding: 10px;
  text-align: left;
  //box-shadow: 0px 6px 0px 0px #fe8500;
  .dialog_close {
    width: 30px;
    height: 30px;
    position: absolute;
    right: -5px;
    top: -5px;
    background-image: url("../assets/images/close-icon.png");
    background-size: 100%;
  }
}
.mask {
  height: 100%;
  width: 100%;
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  background-color: #000;
  opacity: 0.4;
  z-index: 99;
}

</style>
